<template>
  <div
    id="appPolyv"
    class="polyv-player"
    ref="appPolyv"
  >
    <div
      id="playerContent"
      ref="playerContent"
    ></div>

  </div>
</template>
<script>
import dmExtension from './dmExtension';
import PreviewExtension from './PreviewExtension';

export default {
  name: 'PolyvPlayer',
  mixins: [dmExtension, PreviewExtension],
  inject: ['topPlayer'],
  props: {
    vid: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      player: null,
      width: '100%',
      height: 'auto',
      options: {
        autoplay: false, // 是否自动播放
        showAuto: true, // 是否显示自动清晰度按钮
        df: 0, //  可设置为0、1、2、3，分别对应自动、流畅、高清、超清
        showHd: true, // 是否显示清晰度选择
        hideRepeat: true, // 播放结束后是否显示重播面板
        speed: [2, 1.5, 1.2, 0.5], // 显示哪几种倍速 设置为false则关闭倍速，
        watchStartTime: 0, // 从第几秒开始播放
        watchEndTime: 15, // 播放到第几秒结束播放
        hideSwitchPlayer: true, // 是否禁止显示HTML5与flash播放器切换按钮
        screenshot: true, // 是否开启视频截图功能
        loading_bg_img: '', // 视频默认封面图
        adSkip: true, // 是否可以跳过广告
      },
    };
  },
  mounted() {
    const el = this.$refs.appPolyv;
    this.height = el.offsetHeight;
    this.playerback();
  },
  methods: {
    previewEnd() {
      console.log('xxx', this, this.topPlayer);
      this.topPlayer.onPreviewEnd();
    },
    playerback() {
      this.player = null;
      this.player = window.polyvPlayer({
        wrap: '#playerContent',
        width: '100%',
        height: this.height,
        vid: this.vid,
        ...this.options,
      });
      // 播放器数据初始化完毕后
      window.s2j_onPlayerInitOver = () => {
        const dmSwith = document.querySelectorAll('#dmSwith');
        if (dmSwith.length === 0) {
          this.setdmSwitch();
        }
      };
      window.s2j_onPlayStart = () => {
        console.log('onPlayStart');
        // setTimeout(() => {
        //   this.previewEnd();
        // }, 5000);

        // // 是否可以试看,  如果允许 调用试看函数
        this.vidoePreview(5, 'pol');
      };
      // 视频播放结束后，会调用此函数
      window.s2j_onPlayOver = () => {
        console.log('视频播放结束后，会调用此函数');
      };
      // 当触发播放事件时
      window.s2j_onVideoPlay = () => {
        console.log(this.player.j2s_getCurrentTime());

        // console.log('当触发播放事件时 s2j_onVideoPlay');
      };
      // 当触发暂停事件时
      window.s2j_onVideoPause = () => {
        // console.log('当触发暂停事件时');
      };
      // 当触发答题事件时
      window.s2j_onInteractionData = () => {
        // console.log('当触发答题事件时');
      };
    },
    zanging() {
      this.player.j2s_pauseVideo();
    },
    getPlayer(movieName) {
      if (navigator.appName.indexOf('Microsoft') !== -1) {
        const reObj = window[movieName];
        try {
          let reData = null;
          reData = reObj.length > 0 ? reObj[0] : reObj;
          return reData;
        } catch (e) {
          return null;
        }
      } else {
        return document[movieName];
      }
    },
  },
  watch: {
    vid() {
      const el = this.$refs.playerContent;
      el.innerHTML = null;
      this.playerback();
    },
  },
};
</script>
<style  lang="scss">
.polyv-player {
  width: 100%;
  height: 100%;
  #item-player {
    width: 100%;
    height: 100%;
  }
}
</style>
